<template>
    <div class="home clearfix">
        <HeaderMobile/>
        <div class="carousel" @mouseenter="enter" @mouseleave="leave">
            <transition-group
                    tag="ul"
                    name="image"
                    enter-active-class="animated lightSpeedIn"
                    leave-active-class="animated lightSpeedOut">
                <li
                        v-for="(image,index) in imgList"
                        :key="index"
                        v-show="index === mark">
                    <a href="javascript:">
                        <img :src="image.src">
                    </a>
                </li>
            </transition-group>
            <div class="bullet">
        <span
                v-for="(item,index) in imgList.length"
                :class="{'active':index === mark}"
                @click="change(index)"
                :key="index"></span>
            </div>
            <div class="switch con-width-1200 clearfix pos-abs">
                <span class="prev" @click="prev">&lt;</span>
                <span class="next" @click="next">&gt;</span>
            </div>
        </div>

        <FooterMobile/>
    </div>
</template>

<script>
    import HeaderMobile from './HeaderMobile.vue'
    import FooterMobile from "./FooterMobile.vue"
    import _http from "../httpService"

    export default {
        name: "About",
        props: {
            msg: String
        },
        components: {
            HeaderMobile,
            FooterMobile
        },
        data() {
            return {
                mark: 0,
                imgList: [],
                isDisable: false,
                name: "",
                mobile: "",
                content: ""
            };
        },
        methods: {
            li_click: function (id) {
                this.$router.push({path: "/detail/" + id});
            },
            //添加方法
            change(i) {
                this.mark = i;
            },
            prev() {
                this.mark--;
                if (this.mark === -1) {
                    this.mark = 3;
                }
            },
            next() {
                this.mark++;
                if (this.mark === this.imgList.length) {
                    this.mark = 0;
                }
            },
            autoPlay() {
                this.mark++;
                if (this.mark === 4) {
                    this.mark = 0;
                }
            },
            play() {
                this.time = setInterval(this.autoPlay, 3000);
            },
            enter() {
                console.log("enter");
                clearInterval(this.time);
            },
            leave() {
                console.log("leave");
                this.play();
            }
        },
        created() {
            _http
                .get(
                    "/content/selectListByEnterpriseIdAndCatalogCode?catalogCode=carouselMap"
                )
                .then(response => {
                    console.log(response);
                    this.imgList = [];
                    response.data.forEach(element => {
                        this.imgList.push({id: element.id, src: element.previewImage});
                    });
                })
                .catch(error => console.log(error))
                .finally(() => (this.loading = false));

            this.play();
        },

    }
    ;
</script>

<style>


</style>
